<template>
    <el-container>
        <el-header class="header-tabs">
            <el-tabs type="card" v-model="search.status" @tab-change="activityStatusTabChange">
                <el-tab-pane label="所有" :name="0"></el-tab-pane>
                <el-tab-pane label="即将开始" :name="1"></el-tab-pane>
                <el-tab-pane label="进行中" :name="2"></el-tab-pane>
                <el-tab-pane label="已结束" :name="3"></el-tab-pane>
                <el-tab-pane label="已取消" :name="-1"></el-tab-pane>
            </el-tabs>
        </el-header>
        <el-header>
            <div class="left-panel">
                <el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
            </div>
            <div class="right-panel">
                <div class="right-panel-search">
                    <el-input v-model="search.keyword" placeholder="活动名称" clearable></el-input>
                    <el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
                    <el-button :loading="exportLoading" @click="exportList">导出</el-button>
                </div>
            </div>
        </el-header>
        <el-main class="nopadding">
            <scTable ref="table" :apiObj="list.apiObj" row-key="id" :remoteSummary="true" stripe>
                <el-table-column label="#ID" prop="id" width="50"></el-table-column>
                <el-table-column label="活动名称" prop="name" width="300"></el-table-column>
                <el-table-column label="置顶" width="80">
                    <template #default="scope">
                        <el-switch v-model="scope.row.is_zhiding" @change="changeTopSwitch($event, scope.row)"
                            :loading="scope.row.$switch_top" :active-value="1" :inactive-value="0"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="开始时间" prop="start_time" width="150"></el-table-column>
                <el-table-column label="结束时间" prop="end_time" width="150"></el-table-column>
                <el-table-column label="地点" prop="address" width="250"></el-table-column>
                <el-table-column label="最大可报名人数" prop="max_num" width="120">
                    <template #default="scope">
                        {{ scope.row.max_num > 0 ? scope.row.max_num : '-' }}
                    </template>
                </el-table-column>
                <el-table-column label="报名人数" prop="num" width="100"></el-table-column>
                <el-table-column label="总报名金额" prop="total_sign_amount" width="100"></el-table-column>
                <el-table-column label="总优惠金额" prop="total_discount_amount" width="100"></el-table-column>
                <el-table-column label="状态" prop="status_str" width="100">
                    <template #default="scope">
                        <el-tag type="warning" v-if="scope.row.status == 1">{{ scope.row.status_str }}</el-tag>
                        <el-tag type="success" v-else-if="scope.row.status == 2">{{ scope.row.status_str }}</el-tag>
                        <el-tag type="info" v-else-if="scope.row.status == 3">{{ scope.row.status_str }}</el-tag>
                        <el-tag v-else>{{ scope.row.status_str }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="排序" prop="sort" width="100">
                    <template #default="scope">
                        <el-input v-model="scope.row.sort" @blur="sort($event, scope.row)" />
                    </template>
                </el-table-column>
                <el-table-column label="添加时间" prop="create_time" width="180"></el-table-column>
                <el-table-column label="操作" fixed="right" align="right" width="280">
                    <template #default="scope">
                        <el-button-group>
                            <el-button text type="primary" size="small"
                                @click="edit(scope.row, scope.$index)">编辑</el-button>
                            <el-button text type="primary" size="small"
                                @click="showRegistrationRecord(scope.row, scope.$index)">参与情况</el-button>
                            <el-button text type="primary" size="small" @click="comment(scope.row)">评论列表</el-button>
                            <el-popconfirm title="确定删除吗？" @confirm="del(scope.row, scope.$index)">
                                <template #reference>
                                    <el-button text type="primary" size="small">删除</el-button>
                                </template>
                            </el-popconfirm>
                        </el-button-group>
                    </template>
                </el-table-column>

            </scTable>
        </el-main>
    </el-container>


    <el-drawer v-model="dialog.save" :title="saveDrawerTitle" size="50%" destroy-on-close>
        <save-drawer ref="saveDrawer" @success="onSaveSuccess" @closed="dialog.save = false"></save-drawer>
    </el-drawer>

    <el-drawer v-model="dialog.registrationRecord" :title="registrationRecordTitle" size="60%" destroy-on-close>
        <registration-record-drawer ref="registrationRecordDrawer" @closed="dialog.registrationRecord = false"
            :activity="currentActivity"></registration-record-drawer>
    </el-drawer>
    <el-drawer v-model="dialog.comment" :title="commentListTitle" size="60%" destroy-on-close>
        <comment-list ref="commentList" @closed="dialog.comment = false" :activity="currentActivity"></comment-list>
    </el-drawer>
</template>

<script>
import saveDrawer from './save'
import registrationRecordDrawer from './registration/index'
import commentList from './comment/index'

export default {
    name: 'role',
    components: {
        saveDrawer,
        registrationRecordDrawer,
        commentList
    },
    data () {
        return {
            dialog: {
                save: false,
                registrationRecord: false
            },

            list: {
                apiObj: this.$API.app.activity.list,
            },
            registrationRecordTitle: "",
            saveDrawerTitle: "添加活动",
            commentListTitle: '评论列表',
            currentActivity: null,
            exportLoading: false,
            search: {
                status: 0,
                keyword: null
            }
        }
    },
    methods: {
        //添加
        add () {
            this.saveDrawerTitle = "添加活动";
            this.dialog.save = true
        },
        //编辑
        edit (row) {
            this.saveDrawerTitle = row.name
            this.dialog.save = true
            this.$nextTick(() => {
                this.$refs.saveDrawer.setData(row)
            })
        },
        showRegistrationRecord (row) {
            this.dialog.registrationRecord = true
            this.currentActivity = row
            this.registrationRecordTitle = row.name + '-参与情况'
            // this.$nextTick(() => {
            //     this.$refs.registrationRecordDrawer.open()
            // })
        },

        comment (row) {
            this.dialog.comment = true;
            this.currentActivity = row
            this.commentListTitle = row.name + '-评论列表'
        },

        activityStatusTabChange (e) {
            console.log(e)
            this.upsearch();
        },

        sort (e, data) {
            this.$API.app.activity.sort.post(data.id, data.sort)
                .then(() => {
                    this.$message.success("操作成功")
                    this.refresh()
                })
        },

        //搜索
        upsearch () {
            this.$refs.table.upData(this.search);
        },

        exportList () {
            this.downloadFile(this.list.apiObj, '活动列表-' + (new Date()).getTime(), Object.assign(this.search, { action: 'export' }))
        },
        downloadFile (apiObj, fileName, data = {}) {
            this.downLoading = true
            var _this = this
            console.log(fileName)
            apiObj.get(data, {
                responseType: 'blob',
                onDownloadProgress (e) {
                    if (e.lengthComputable) {
                        _this.downLoadProgress = parseInt(e.loaded / e.total * 100)
                    }
                }
            }).then(res => {
                this.downLoading = false
                this.downLoadProgress = 0
                let url = URL.createObjectURL(res);
                let a = document.createElement("a")
                a.style = "display: none"
                a.target = "_blank"
                a.download = fileName + ".xls"
                a.href = url
                document.body.appendChild(a)
                a.click()
                document.body.removeChild(a)
                URL.revokeObjectURL(url)
            }).catch(err => {
                this.downLoading = false
                this.downLoadProgress = 0
                this.$notify.error({
                    title: '下载文件失败',
                    message: err
                })
            })
        },

        changeTopSwitch (val, row) {
            row.is_zhiding = row.is_zhiding == 1 ? 0 : 1
            row.$switch_top = true;
            this.$API.app.activity.top.post(row.id, { top: val })
                .then(() => {
                    delete row.$switch_top;
                    row.is_zhiding = val;
                    this.$message.success("操作成功")
                    this.refresh()
                })
        },

        summaryMethod () {
            return { num: 1, num2: 2 }
        },

        onSaveSuccess () {
            this.dialog.save = false;
            this.refresh();
        },
        //本地更新数据
        refresh () {
            this.$refs.table.refresh()
        }
    }
}
</script>

<style></style>
